<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>上传头像-云信号</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script language="javascript" type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script>
	</head>

	<body>
		<div class="head">
			<div class="headc">
				<div class="headcl">
					<ul>
						<li>
							<a href="javascript:;">关于我们</a><span>丨</span>
						</li>
						<li>
							<a href="javascript:;">新闻资讯</a><span>丨</span>
						</li>
						<li>
							<a href="javascript:;">软件下载</a><span>丨</span>
						</li>
						<li>
							<a href="javascript:;">常见问题</a><span>丨</span>
						</li>
						<li>
							<a href="javascript:;">在线客服</a>
						</li>
					</ul>
				</div>
				<div class="headr">
					<img src="images/phone.png" /> 400-000-8888
				</div>
			</div>
		</div>
		<div class="top">
			<div class="topc">
				<a href="index.html" class="logo">
					<img src="../images/logo.png" />
				</a>
				<div class="nav">
					<ul>
						<li>
							<a href="../index.htm" class="active">首页</a>
						</li>
						<li>
							<a href="../cloud_signal.htm">云端信号</a>
						</li>
						<li>
							<a href="../follow_cow.htm">跟随牛人</a>
						</li>
						<li>
							<a href="../activity.htm">最新活动</a>
						</li>
						<li>
							<a href="../novice_guide.htm">新手指南</a>
						</li>
					</ul>
				</div>
				<a href="index.html" class="myather">
					<img src="images/myather.png" /> 我的账户
				</a>
			</div>
		</div>

		<div class="myinfoout">
			<div class="myinfo">
				<div class="myinfoname">
					<a href="index.html" title="个人中心">
						<img src="images/myather.png" />
						<p>LUOMIOU</p>
					</a>
				</div>
				<div class="Safety">
					<p>绑定MT4：
						<a href="Signal_management.html#signal_management">3</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;跟随信号：
						<a href="Withsingle_management.html#already_follow_signal">3</a>
					</p>
					<p>安全等级：<span>弱</span></p>
					<div class="progbsr">
						<div style="width: 25%; height: 7px; border-radius: 5px; background-color: #ff9933;"></div>
					</div>
					<div class="safetyimg">
						<img src="images/safetyimg1.png" />
						<img src="images/safetyimg2.png" />
						<img src="images/safetyimg3.png" />
						<img src="images/safetyimg4.png" />
						<div class="clear"></div>
					</div>
				</div>
				<div class="myinfor">
					<div class="myinfortop">
						<table>
							<tr>
								<th>充值总云币<img src="images/wen.png"></th>
								<th>喊单总收入云币<img src="images/wen.png"></th>
								<th>推荐总收入云币<img src="images/wen.png"></th>
							</tr>
							<tr>
								<td class="td1">9999.88</td>
								<td>$9999.88</td>
								<td>$9999.88</td>
							</tr>
						</table>
					</div>
					<div class="myinforbtm">
						<span>我的专属推广链接 : <s class="copytext">www.bm.com.cn/code=5566</s></span>
						<a href="javascript:;">复制链接</a>
						<a href="javascript:;" class="share">分享</a>
						<p>已推荐人数：266人 </p>
						<div class="clear"></div>
					</div>
					<p class="myinfocount">截止目前为止已为聪明的小伙伴赚钱收益 <span> $83,558,884.02</span></p>
				</div>
				<div class="clear"></div>
			</div>
		</div>

		<!--&lt;!&ndash;当前位置&ndash;&gt;-->
		<!--<div class="ny-navigation">-->
		<!--<div class="container">-->
		<!--<div class="ny-navigation-page">-->
		<!--当前位置：<a href="index.html" title="用户中心">用户中心</a>&nbsp;&gt;&nbsp;个人设置-->
		<!--</div>-->
		<!--</div>-->
		<!--</div>-->

		<!--个人中心-->
		<div class="centerout2">
			<div class="center">
				<div class="centernav">
					<ul>
						<li>
							<a href="index.html">个人中心</a><span></span>
						</li>
						<li>
							<a href="Withsingle.html">跟单管理 </a><span></span>
						</li>
						<li>
							<a href="Signal.html">信号管理</a><span></span>
						</li>
						<li>
							<a href="Partner.html">合作伙伴</a><span></span>
						</li>
						<li>
							<a href="Personalsettings.html" class="active">个人设置</a><span></span>
						</li>
						<li>
							<a href="Finance.html">财务管理</a>
						</li>
					</ul>
				</div>

				<div class="personal">

					<!--图片裁切代码-->
					<link rel="stylesheet" href="css/cropbox.css" type="text/css" />
					<script type="text/javascript" src="js/cropbox.js"></script>
					<script type="text/javascript">
						//图片上传的JS
						$(window).load(function() {
							var options = {
								thumbBox: '.thumbBox',
								spinner: '.spinner',
								imgSrc: 'images/avatar.png'
							}
							var cropper = $('.imageBox').cropbox(options);
							var img = "";
							$('#upload-file').on('change', function() {
								var reader = new FileReader();
								reader.onload = function(e) {
									options.imgSrc = e.target.result;
									cropper = $('.imageBox').cropbox(options);
									getImg();
									$(".thumbBox").addClass("blockBgy");
									$("#localhostUpdate").text("重新选择");
									$(".cropped img").css({
										"border": "1px solid #fd5902"
									});
								}
								reader.readAsDataURL(this.files[0]);
								this.files = [];
								//					getImg();
								$(".imageBox").trigger("touchend");
							})
							$('#fileupload').on('click', function() {
								var imgBase64Data = $(".cropped img:first-child").attr("src")
								var pos = imgBase64Data.indexOf("4") + 2;
								imgBase64Data = imgBase64Data.substring(pos, imgBase64Data.length - pos); //去掉Base64:开头的标识字符
								var newBase64 = imgBase64Data.replace(/\+/g, "%2B"); //ajax传输自动转换加号，故+转换成%28
								console.log(newBase64)
								//以下代码暂时注释
								$.ajax({
									url: 'http://180.97.83.236:2009/API_A/FilePost_Badge_UserAnswer',
									type: 'post',
									data: {
										Token: 'GF1O8Ojw8BHfZagdfF9MHABKQPe1GhASH9GfPSttGr5rMpt2tDG945oRk6N9h2zaP',
										FileElementName: newBase64,
										BadgeTaskID: 23
									},
									dataType: 'JSON',
									success: function(data) {
										console.log(data);
									},
									error: function(e) {
										console.log(e + "-----");
									}
								})
							})

							function getImg() {
								img = cropper.getDataURL();
								$('.cropped').html('');
								$('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');
								$('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>');
								$('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');
							}

							$(".imageBox").on("mouseup", function() {
								getImg();
							});
							$(".imageBox").on("mousewheel DOMMouseScroll", function(e) {
								$(".imageBox").trigger("click");
								$(".imageBox").trigger("mouseup");
							});
							$('#btnZoomIn').on('click', function() {
								cropper.zoomIn();
								$(".imageBox").trigger("mouseup");
							})
							$('#btnZoomOut').on('click', function() {
								cropper.zoomOut();
								$(".imageBox").trigger("mouseup");
							})

						});

						$(function() {
							//初始 显示初始头像
							setTimeout(function() {
								$(".imageBox").trigger("mouseup");
							}, 1000)
						})
					</script>
					<div class="personalhead">
						<span style="color: #009bf5;line-height: 42px;">上传头像</span>
					</div>
					<div class="parthsearch" style="height: auto;    margin-left: 80px;">

					</div>
					<div style="width: 1000px;height: 540px;padding: 0 0 0 20px;border: 1px red solid;">
						<!--图片裁切代码-->
						<div class="container">
							<div class="imageBox" id="imageBox">
								<div class="thumbBox"></div>
								<div class="spinner" style="display: none"></div>
							</div>
							<div class="action">
								<div class="new-contentarea tc">
									<a href="javascript:void(0)" class="upload-img">
										<label for="upload-file">请先选择图片...</label>
									</a>
									<input type="file" class="" name="upload-file" id="upload-file" />
								</div>
								<input type="button" id="fileupload" class="Btnsty_peyton" value="OK">
								<input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+">
								<input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-">
							</div>
							<div class="cropped"></div>
						</div>
						<!--图片裁切代码-->

					</div>

				</div>

				<script type="text/javascript">
					//判断浏览器是否支持FileReader接口
					if(typeof FileReader == 'undefined') {
						document.getElementById("xmTanDiv").InnerHTML = "<h1>当前浏览器不支持FileReader接口</h1>";
						//使选择控件不可操作
						document.getElementById("xdaTanFileImg").setAttribute("disabled", "disabled");
					}

					//选择图片，马上预览
					function xmTanUploadImg(obj) {
						var file = obj.files[0];

						console.log(obj);
						console.log(file);
						console.log("file.size = " + file.size); //file.size 单位为byte

						var reader = new FileReader();

						//读取文件过程方法
						reader.onloadstart = function(e) {
							console.log("开始读取....");
						}
						reader.onprogress = function(e) {
							console.log("正在读取中....");
						}
						reader.onabort = function(e) {
							console.log("中断读取....");
						}
						reader.onerror = function(e) {
							console.log("读取异常....");
						}
						reader.onload = function(e) {
							console.log("成功读取....");

							var img = document.getElementById("xmTanImg");
							img.src = e.target.result;
							//或者 img.src = this.result;  //e.target == this
						}

						reader.readAsDataURL(file)
					}
				</script>

				<script>
					var image = '';

					function selectImage(file) {
						if(!file.files || !file.files[0]) {
							return;
						}
						var reader = new FileReader();
						reader.onload = function(evt) {
							document.getElementById('image').src = evt.target.result;
							image = evt.target.result;
						}
						reader.readAsDataURL(file.files[0]);
					}

					function uploadImage() {
						$.ajax({
							type: 'POST',
							url: 'ajax/uploadimage',
							data: {
								image: image
							},
							async: false,
							dataType: 'json',
							success: function(data) {
								if(data.success) {
									alert('上传成功');
								} else {
									alert('上传失败');
								}
							},
							error: function(err) {
								alert('网络故障');
							}
						});
					}
				</script>


				 

			</div>
		</div>

		<!--底部-->
		<div class="footer">
			<div class="footertop">
				<ul>
					<li class="li1">
						<p>关于我们</p>
						<a href="javascript:;">软件介绍</a>
						<a href="javascript:;">团队介绍</a>
						<a href="javascript:;">联系我们</a>
						<a href="../ManagementEnd/index.html">管理中心</a>
					</li>
					<li class="li1">
						<p>帮助中心</p>
						<a href="javascript:;">常见问题</a>
						<a href="javascript:;">跟单操作</a>
						<a href="javascript:;">新手指南</a>
					</li>
					<li class="li1">
						<p>安全保障</p>
						<a href="javascript:;">公司资讯</a>
						<a href="javascript:;">金融资讯</a>
						<a href="javascript:;">资金安全</a>
					</li>
					<li class="li2">
						<div>
							<img src="images/erweima1.jpg" />
							<p>关注微信公众号</p>
						</div>
						<div>
							<img src="images/erweima2.jpg" />
							<p>进入总站</p>
						</div>
					</li>
					<li class="li3">
						<p class="p1">客服热线</p>
						<p class="p2">400-000-8888</p>
						<p class="p3">周一至周日&nbsp;9:00-20:00</p>
						<a href="tencent://message/?uin=2548484343&Site=www.xwjy.net&Menu=yes">
							<img src="images/info.png" /> 在线咨询
						</a>
					</li>
				</ul>
			</div>
			<div class="footerbot">
				<div class="footerl">
					风险提示：外汇贵金属等产品属于高杠杆交易,存在较大风险,可能会导致亏损超过您存入的的资金 ,请理性投资。<br /> IB8提供平台开户和申请代理等各种外汇服务，但不接触客户资金，不参与外汇平台经营和交易；
					<br /> © 2001-2015 IB8网版权所有 投资有风险，交易需谨慎
				</div>
				<div class="footerr">
					<ul>
						<li>
							<img src="images/Cooperation1.jpg" />
						</li>
						<li>
							<img src="images/Cooperation2.jpg" />
						</li>
						<li>
							<img src="images/Cooperation3.jpg" />
						</li>
						<li>
							<img src="images/Cooperation4.jpg" />
						</li>
					</ul>
				</div>
				<div class="clear"></div>
			</div>
		</div>
	</body>

</html>